.#{$prefix}-quickbar{
	position: absolute;
	top: 0px;
	left: -80px;
	height: 100%;
	width: 80px;
	background-color: $bgcolor;
	z-index:990;
	box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
	padding: 10px;
	-webkit-transition: all .3s;
	-webkit-transition-delay: .3;
	transition: all .3s;
	transition-delay: .3;
	-ms-transition: all .3s;
	-ms-transition-delay: .3;
	    opacity: 0.98;

}

.#{$prefix}-quickbar-header{
	position:absolute;
	top:0px;
	left:0px;
	padding:10px;
	width:100%;
	font-size: 24px;
	color: #fff;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 1px $quickbarHeaderBorderColor solid;
	z-index: 3;
	background-color: $bgcolor;
	cursor: pointer;
}

.#{$prefix}-quickbar-header:hover{
	color: $quickbarHeaderHoverColor;
}

.#{$prefix}-quickbar-body{
	padding: 10px ;
	width: 100%;
	position: absolute;
	top:56px;
	left: 0px;
	z-index:1;
}

.#{$prefix}-quick-item{
	padding: 12px;
	cursor: pointer;
}

.#{$prefix}-quick-item.active{
	background-color:$quickbarItemActiveColor;	
}

.#{$prefix}-quick-item:hover{
	background-color:$quickbarItemHoverColor;
}

.#{$prefix}-quickbar-show{
	font-size: 20px;
	padding: 30px 5px;
	position: absolute;
	right: -36px;
	top: 42%;
	background-color: $bgcolor;
	color: $color;
	cursor: pointer;
	-webkit-transition: all .3s;
	-webkit-transition-delay: .3;
	transition: all .3s;
	transition-delay: .3;
	-ms-transition: all .3s;
	-ms-transition-delay: .3;
}

.#{$prefix}-quickbar-show:hover{
	background-color:$quickbarShowHoverColor;
	color: #ccc;
}

.#{$prefix}-quickbar-scroll{
	position: absolute;
	font-size: 24px;
	left: 0px;
	width: 100%;
	text-align: center;
	cursor: pointer;
	padding: 5px;
	color: #fff;
	background-color: rgb(31, 83, 160);
	z-index: 2;
}

.#{$prefix}-quickbar-scroll.top{
	top: 56px;
}

.#{$prefix}-quickbar-scroll.bottom{
	bottom: 0px;
}

.#{$prefix}-quickbar-scroll:hover,
.#{$prefix}-quickbar-scroll:focus,
.#{$prefix}-quickbar-scroll:active{
	background-color:rgb(28, 73, 139);
}

